<template>
  <div style="width: 100%;height: 100%;margin-top: 20px;">
    <!-- <dv-loading v-if="true">Loading...</dv-loading> -->
    <div class="msg" v-if="roomEquipmentData.actuator == null">请选择房间</div>
    <div class="msg" v-else-if="roomEquipmentData.actuator.length == 0">暂无数据</div>
    <div style="width: 100%;height: 100%;padding: 0 30px;margin-top: 50px;">
        <div class="div_iu"  v-for="(actuator,i) in roomEquipmentData.actuator" :key="i">
          <!-- <span class="left" style="width: 50px;height: 50px;display: block;"> -->
            <i class="iconfont icon-shinei_fengshan02" v-if="actuator.deviceType==10" style="font-size: 50px;"></i>
            <i class="iconfont icon-LEDdengtiao" v-else-if="actuator.deviceType==11" style="font-size: 50px;"></i>
            <i class="iconfont icon-HOtubiao-_jiareqi" v-else-if="actuator.deviceType==12" style="font-size: 50px;"></i>
            <i class="iconfont icon-shuibeng" v-else-if="actuator.deviceType==13" style="font-size: 50px;"></i>
           <!-- </span> -->
          <p style="margin-top: 20px;">{{ actuator.deviceName }}</p>
          <el-switch style="margin-top: 20px; width: 60;height: 60;"   v-model="actuator.deviceData" @change="changeDeviceSwitch(i,actuator.deviceData)">
            </el-switch>
        </div>
      </div>
  </div>
  
  </template>
  
  <script>
  import {
    changeDeviceSwitch
  } from "@/api/iot/deviceInfo";
  export default {
    inject: ["cancelLoading","openLoading"],
      data() {
          return {
            timer: null,
          };
      },
      computed:{
            roomEquipmentData(){
                return this.$store.state.roomEquipmentData;
            }
        },
        created() {
   
            this.getData()
        },
        beforeDestroy() {
            this.clearData()
        },
      methods: {
        success() {
        this.$notify({
          title: '成功',
          message: '执行成功',
          type: 'success'
        });
      },

      warning(msg) {
        this.$notify({
          title: '警告',
          message: msg,
          type: 'warning'
        });
      },
        changeDeviceSwitch(i,data){
          this.openLoading();
          let id = this.roomEquipmentData.actuator[i].deviceId;
          changeDeviceSwitch(id,data==true?"1":"0").then(response => {
                if (response.code == 200) {
                  if(response.msg == "ok"){
                    this.success();
                  }else{
                    this.roomEquipmentData.actuator[i].deviceData = !data;
                    this.warning(response.msg);
                  }
                }
                this.cancelLoading();
            });
        },
        getData() {
            console.log(this.roomEquipmentData)
        // 轮询
        this.switper();
    },
    clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
     //轮询
     switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getData();
            };
            this.timer = setInterval(looper, 1000);
        },
      },
  };
  </script>
<style lang="scss" scoped>
    .div_iu{
        text-align: center;
        font-size: 22px;
        width: 100px;
        height: 100px;
        float: left;
        margin: 0 20px;
        .bottom{
            display: block;
            margin-top: 10px;
        }
    }
    .msg{
      width: 100%;
      text-align: center;
      font-size: 24px;
    }
</style>
  